<template>
	<div class="head">
		<div class="left-box flex-box-1">
			<el-select v-model="searchValue" filterable placeholder="请选择" size="mini" popper-class="el-select-popper"
				:popper-append-to-body="false" @change="handleChange">
				<el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div class="right-box">
			<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#000000"
				text-color="#fff" active-text-color="#fff">
				<el-menu-item index="1">主页</el-menu-item>
				<el-submenu index="2">
					<template slot="title">星系科普</template>
					<el-menu-item index="2-1">猎户臂</el-menu-item>
					<el-menu-item index="2-2">太阳及太阳系</el-menu-item>
					<el-menu-item index="2-3">八大行星</el-menu-item>
					<el-menu-item index="2-4">岩质行星</el-menu-item>
					<el-menu-item index="2-5">气态巨行星</el-menu-item>
				</el-submenu>
				<el-menu-item index="3">知识问答</el-menu-item>
				<el-menu-item index="4" v-if="!userName">登录</el-menu-item>
				<el-submenu index="5" v-if="userName">
					<template slot="title">{{ userName }}</template>
					<el-menu-item index="5-1">退出登录</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>
		<el-dialog title="" :visible.sync="loginDialogVisible">
			<LoginForm @cancel="handleCancel" @loginSuccess="loginSuccess" :type="loginType"></LoginForm>
		</el-dialog>
	</div>
</template>

<script>
import { getToken, getUserInfo } from '@/utils/token'
export default {
	name: 'HeadCopm',
	components: {
		LoginForm: () => import(/** webpackChunkName: "LoginForm" */ '@/components/LoginForm.vue'),
	},
	props: {
		type: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			list: [],
			searchValue: '',
			loginDialogVisible: false,
			loginType: 1,
		}
	},
	created() {
		this.init();
	},
	mounted() {
		this.$store.state.userInfo = getUserInfo() || {};
	},
	methods: {
		init() {
			this.getList();
		},
		handleSelect(key) {
			let pathArr = ['2-1', '2-2', '2-3', '2-4', '2-5'];
			if (pathArr.includes(key)) {
				const path = {
					'2-1': '/detail1',
					'2-2': '/detail2',
					'2-3': '/detail3',
					'2-4': '/detail4',
					'2-5': '/detail5',
				}
				this.$router.push({
					path: path[key]
				})
				return
			}
			const obj = {
				'1': this.goHome,
				'3': this.toQuestion,
				'4': this.toLogin,
				'5-1': this.quitLogin
			}
			obj[key]();
		},
		handleChange(key) {
			this.handleSelect(key);
		},
		toLogin() {
			this.loginDialogVisible = true;
		},
		toQuestion() {
			if (getToken() && getUserInfo()) {
				this.$router.push({
					path: '/question'
				});
			} else {
				this.loginDialogVisible = true;
			}
		},
		getList() {
			this.list = [
				{
					value: '2-1',
					label: '猎户臂'
				},
				{
					value: '2-2',
					label: '太阳及太阳系'
				},
				{
					value: '2-3',
					label: '八大行星'
				},
				{
					value: '2-4',
					label: '岩质行星'
				},
				{
					value: '2-5',
					label: '气态巨行星'
				}
			]
		},
		quitLogin() {
			localStorage.removeItem('userInfo');
			document.cookie = `starsystemtoken=`
			window.location.reload();
		},
		handleCommand(e) {
			this.quitLogin();
		},
		handleCancel() {
			this.loginDialogVisible = false;
		},
		loginSuccess() {
			this.$store.state.userInfo = getUserInfo() || {};
			this.getList();
		},
		goHome() {
			this.$router.push({
				path: '/'
			})
		}
	},
	computed: {
		userName() {
			let user = this.$store.state.userInfo;
			return user.realName ? user.realName : '';
		}
	},

}
</script>

<style scoped lang="scss">
$mainC: #000000;

.head {
	width: 100%;
	height: 10vh;
	background-color: $mainC;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30px;
	box-sizing: border-box;

	>div {
		height: 100%;
	}

	.left-box {
		width: 35%;

		::v-deep .el-input.el-input--suffix {

			.el-input__inner {
				background: $mainC !important;
				border: 1px solid #ffffff;
				color: #ffffff;
			}

			.el-input__suffix-inner {
				position: absolute;
				left: -25px;
			}

			.el-select__caret.el-input__icon.el-icon-arrow-up {
				line-height: 30px;
			}

			.el-input__inner::placeholder {
				color: #fff;
			}

			.el-icon-arrow-up:before {
				color: #fff;
			}
		}

		::v-deep .el-select-dropdown {
			background-color: $mainC !important;
			left: 0px !important;

			.el-select-dropdown__item {
				color: #ffffff;
			}

			.el-select-dropdown__item.hover {
				background-color: #409EFF
			}

			.popper__arrow::after {
				border-bottom-color: $mainC !important;
			}
		}
	}

	.center-box {
		width: 30%;
		text-align: center;
		color: #ffffff;

		img {
			width: 40px;
			height: 40px;
		}
	}

	.right-box {
		//width: 350px;
		display: flex;
		align-items: center;

		.nav {
			cursor: pointer;
			margin-right: 40px;
		}

		.username {
			cursor: pointer;
			margin: 2px 20px 0 0;
			font-size: 16px;
			// color: #ffffff;
		}
	}
}

.flex-box-1 {
	display: flex;
	align-items: center;
}

.flex-box-2 {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.flex-box-3 {
	display: flex;
	align-items: center;
	justify-content: center;
}

::v-deep {
	.el-dialog__header {
		display: none !important;
	}

	.el-dialog {
		margin-top: calc(50vh - 195px) !important;
		width: 800px !important;
	}

	.el-dialog__body {
		padding: 0px !important;
	}
	.el-menu--horizontal>.el-menu-item.is-active {
		border-bottom: none !important;
	}
	.el-menu.el-menu--horizontal {
		border-bottom: none !important;
	}
}
</style>
